Mobile app interactivity
Overview of Event RSVP Helper
The Event RSVP Helper app is designed to digitize and simplify the RSVP process for various events, targeting a broad audience of adults. It aims to facilitate event planning without the hassle of traditional mail, offering an easy-to-use interface for guests to respond. Key features include customizable digital invitations, a user-friendly design, and seamless guest management. The app would generate revenue through a token system or advertisements.
Key features
- Streamlines planning for weddings, birthdays, and other events.
- Eliminates manual RSVP tracking and invitation management.
- Enhances user experience for organizers and guests.
- Provides themed templates for various events:
- Weddings: white flowers, black and white themes.
- Baby showers: balloons, baby bottles, pink and blue colors.
- Graduations: caps and festive decorations.
- Birthdays: cake and candle designs.
- Other: versatile designs for different events.
- Automatically inserts event details into invitations.
- Uses contacts for easy invitation distribution.
- Allows setting of RSVP deadlines and provides response summaries.
Individual Screen details
The following section documents the individual screens of the application, the elements on each screen, and how the user is expected to interact with the screen.
Main screen
The main screen serves as the central node for this application. All other screens begin from this screen.
Wireframe design
Below is my wireframe image.
As-built screenshot
Here are screen shots of what I created running on my phone.
Interactivity
- The Home Screen acts as the central hub where users can choose the type of event they want to plan. It features several interactive buttons, each representing a different event type (e.g., Wedding, Birthday, Graduation, Baby Shower, Other).
- Tapping on these buttons triggers navigation to the ‘Theme Selection’ screen with the respective event type as a parameter, facilitating a tailored experience for each choice.
- The screen also incorporates dynamic styling that adjusts the background and text color based on a global dark mode setting. This responsiveness enhances user experience by adapting the visual elements to their preference settings.
- Additionally, there’s a settings button prominently placed to provide easy access to the app’s settings, further emphasizing functionality and user control.
Contacts Screen
The contacts screen serves as the starting point for other screens that all work to allow the user to freely select who their guests will be, along with customizing the message invites.
Wireframe design
Below is my wireframe image.
As-built screenshot
Here are screen shots of what I created running on my phone.
Interactivity
- This screen offers a dynamic list of potential guests, each listed with a switch to toggle their invitation status. This interactivity allows users to manage who is invited to the event directly from this list.
- The switches provide immediate feedback when toggled, changing color to indicate an invited or uninvited status, thus giving clear visual cues.
- A ‘Finalize Invites’ button at the bottom of the screen allows users to proceed once they have set their guest list, navigating them to the next step in the event planning process, which involves text customization for invitations.
Settings Screen
The settings screen gives the user the ability to set the app according to their preferences, dealing with app appearance and access to contacts.
Wireframe design
Below is my wireframe image.
As-built screenshot
Here is a screen shot of what I created running on my phone.
Interactivity
- The Settings Screen provides toggle switches for enabling or disabling dark mode and access to contacts. These switches allow users to customize their app experience to suit their preferences, demonstrating a practical application of React’s state management and context API.
- Each setting adjustment is immediately reflected in the app’s UI, showing the impact of user choices in real-time.
- There’s also a logout button that, when pressed, displays a logout confirmation, further emphasizing user control and security within the app.